<template>
    <div>
    <setHeader :title="headerTitle" :back-fn="gotoback"></setHeader>
    <div class="content main_security" style="margin-bottom: 0;">
        <div class="main_menu" @click="mobileClick">
            <label for="">手机号码</label>
            <span style="font-size: 0.26rem; color: #666;">{{this.userInfo.mobile}}</span>
            
            <i class="iconfont icon-xiangyou"></i>
        </div>
        <div class="main_menu" @click="emailClick">
            <label for="">邮箱账号</label>
            <span style="font-size: 0.26rem; color: #666;">{{this.userInfo.usermail}}</span>
            <i class="iconfont icon-xiangyou"></i>
        </div>
        <!-- <div class="main_menu" @click="WeChatLogin">
            <label for="">微信账号</label>
            <span style="font-size: 0.26rem; color: #666;">{{userName}}</span>
            <i class="iconfont icon-xiangyou"></i>
        </div> -->
        <div class="main_menu" @click="updateClick" style="border-bottom: 1px solid #d8d8d8;">
            <label for="">友圈密码</label>
            <span style="font-size: 0.26rem; color: #666;" v-if="userPassword">{{userPassword}}</span>
            <span style="font-size: 0.26rem; color: #666;" v-else>未设置</span>
            <i class="iconfont icon-xiangyou"></i>
        </div>
    </div>
    <!-- 点击微信 的 提示框 -->
    <div class="mint-msgbox-wrapper" style="position: absolute; z-index: 2011;width: 100%;height: 100%;background-color: rgb(0,0,0,0.5);top: 0;left: 0;" v-if="msgboxFlag">
        <div class="mint-msgbox y-msgbox"  >
            <div class="mint-msgbox-content y-msgbox-content">
                <div class="mint-msgbox-message y-msgbox-message">“友圈”想要打开“微信”</div> 
                <div class="mint-msgbox-input" style="display: none;">
                <input placeholder="" type="text"> 
                <div class="mint-msgbox-errormsg" style="visibility: hidden;"></div>
                </div>
            </div> 
            <div class="mint-msgbox-btns y-msgbox-btns">
                <button class="mint-msgbox-btn mint-msgbox-cancel" style=""  @click="msgboxFlag=false">取消</button>
                <button class="mint-msgbox-btn mint-msgbox-confirm" @click="weChatLogin2">打开</button>
            </div>
        </div>
    </div>

    <div class="dialog__wrap" v-show="state">
        <transition name="background-fade" @after-leave="afterLeave">
            <div class="dialog__background" v-if="show"></div>
        </transition>
        <transition name="fade-move">
            <div class="dialog" v-if="show">   
                <i class="iconfont icon-cuo dialog__head__btn" @click="close"></i>
                <div  class="dialog__head">
                    {{dialog_config.dialog_title}}
                    <p>{{dialog_config.dialog_desc}}</p>
                </div>
                <div @submit.prevent="onBindTel">
                    <!-- 手机 -->
                    <div class="dialog__body" v-if="moblieShow">
                        <span :class="validClass($v.textFrom.mobile)">
                            <input type="text" maxlength="11" v-model="textFrom.mobile" @input="$v.textFrom.mobile.$touch()" placeholder="手机号码" v-if="emailInput">
                        </span>
                        <span :class="validClass($v.textFrom.captcha)">
                            <input type="text" maxlength="4" v-model="textFrom.captcha" @input="$v.textFrom.captcha.$touch()" placeholder="输入手机验证码" style="width: 56%;">
                        </span>
                        <span id="btn" @click="sendSms" :disabled="contpending">{{contpending ? '重新发送 (' + count + '秒)' : '获取验证码'}}</span>
                        <!-- <p class="yanzhen" v-if="$v.textFrom.captcha.$dirty && $v.textFrom.captcha.$invalid">{{coder}}</p> -->
                    </div>
                    <!-- 邮箱 -->
                    <div class="dialog__body" v-if="emailShow">
                        <span :class="validClass($v.textFrom.email)">
                            <input type="text" v-model="textFrom.email" @input="$v.textFrom.email.$touch()" placeholder="输入邮箱号码" v-if="emailInput">
                        </span>
                        <span :class="validClass($v.textFrom.emailcaptcha)">
                            <input type="text" maxlength="4" v-model="textFrom.emailcaptcha" @input="$v.textFrom.emailcaptcha.$touch()" placeholder="输入邮箱验证码" style="width: 56%;">
                        </span>
                        <span id="btn" @click="sendEmailSms" :disabled="emailpending">{{emailpending ? '重新发送 (' + emailcount + '秒)' : '获取验证码'}}</span>
                    </div>
                    <!-- 密码 -->
                    <div class="dialog__body" v-if="passShow">
                        <span :class="validClass($v.textFrom.password)">
                            <input type="password" maxlength="20" v-model="textFrom.password" @input="$v.textFrom.password.$touch()" :placeholder="dialog_config.passplaceholder">
                        </span>
                        <span :class="validClass($v.textFrom.confirmPass)">
                            <input type="password" maxlength="20" v-model="textFrom.confirmPass" @input="$v.textFrom.confirmPass.$touch()" :placeholder="dialog_config.confirmplaceholder">
                        </span>
                        <p class="yanzhen" style="text-align: center;color: #999;">密码由6-20位数字，或英文和字符组成</p>
                    </div>
                    <!-- 更改手机号 -->
                    <div class="dialog__body" v-if="updateShow">
                        <select id="selectid">
                            <!-- <option value="">请选择验证方式</option> -->
                            <option :value="n" class="opi" v-for="(list, n) in lister" :key="n">{{list.text}}</option>
                        </select>
                        <p class="yanzhen yanz">{{aa}}</p>
                        <p class="yanzhens">{{aa}}</p>
                    </div>
                    <!-- 手机 -->
                    <div class="dialog__footer" v-if="moblieShow">
                        <Btn @click.native="confirm(states)" class="dialog__footer__btn dialog__footer__btn--success" v-if="dialog_config.okText">{{dialog_config.okText}}</Btn>
                        <Btn @click.native="cancel" class="dialog__footer__btn dialog__footer__btn--fail" v-if="dialog_config.cancelText">{{dialog_config.cancelText}}</Btn>
                    </div>
                    <!-- 邮箱 -->
                    <div class="dialog__footer" v-if="emailShow">
                        <Btn @click.native="emailconfirm(emailstate)" class="dialog__footer__btn dialog__footer__btn--success" v-if="dialog_config.emailokText">{{dialog_config.emailokText}}</Btn>
                        <Btn @click.native="cancel" class="dialog__footer__btn dialog__footer__btn--fail" v-if="dialog_config.cancelText">{{dialog_config.cancelText}}</Btn>
                    </div>
                    <!-- 密码 -->
                    <div class="dialog__footer" v-if="passShow">
                        <Btn @click.native="passconfirm(passState)" class="dialog__footer__btn dialog__footer__btn--success" v-if="dialog_config.passokText">{{dialog_config.passokText}}</Btn>
                        <Btn @click.native="cancel" class="dialog__footer__btn dialog__footer__btn--fail" v-if="dialog_config.cancelText">{{dialog_config.cancelText}}</Btn>
                    </div>
                    <!-- 更改手机号 -->
                    <div class="dialog__footer" v-if="updateShow">
                        <Btn @click.native="updatemobile(updateIphone)" class="dialog__footer__btn dialog__footer__btn--success" v-if="dialog_config.updateokText">{{dialog_config.updateokText}}</Btn>
                        <Btn @click.native="cancel" class="dialog__footer__btn dialog__footer__btn--fail" v-if="dialog_config.cancelText">{{dialog_config.cancelText}}</Btn>
                    </div>
                </div>
            </div>
        </transition>
    </div>



    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import Btn from "../components/Button";
import { required, minLength } from "vuelidate/lib/validators";
import { telNumPattern, emailPattern } from "@/class/product-validation.class";

    export default {
        data() {
            return {
                headerTitle: '账号与安全',
                userInfo:'',     //用户
                msgboxFlag: false,   //微信遮罩层
                userName: '',        //微信登录使用的，现在不需要了
                userPassword: '已设置',
                // isShow: true,
                isCheck:1,//手机验证 /邮箱验证

                dialog_config: {
                    dialog_title: '',    //弹框标题
                    dialog_desc: '',     //弹框标题下的描述
                    phonetips: '',       //手机输入框默认文字
                    smstips: '',          //手机验证码输入框默认文字
                    okText: '',             //绑定手机按钮
                    cancelText: '',         //关闭按钮
                    emailokText: '',        //绑定邮箱按钮
                    passokText: '',         //绑定密码按钮
                    passplaceholder: '',    //密码输入框默认文字
                    confirmplaceholder: '',     //重新输入密码输入框默认文字
                    updateokText: ''          //更改手机 下一步按钮
                },
                moblieShow: false,            //手机弹框
                emailShow: false,               //邮箱弹框
                passShow: false,                //密码弹框
                updateShow: false,              //更改手机弹框
                state: false,                   //弹框
                show: false,                    //弹框
                emailInput: true,               //更改手机号手机号码和邮箱号码不显示的时候用
                contpending: false,             //短信验证码false
                emailpending: false,            //邮箱验证码false
                emailcount: 60,
                count: 60,
                pending: false,
                textFrom: {                     //输入框内容
                    mobile: '',
                    captcha: '',
                    email: '',
                    emailcaptcha: '',
                    password: '',
                    confirmPass: ''
                },
                // verificationStatus:'',
                coder: '验证码错误呢 亲~ 请重新获取验证码呢',
                states: 1,       //手机验证后点击状态
                passState: 1,     //密码验证后点击状态
                emailstate: 1,     //邮箱验证后点击状态
                updateIphone: 1,    //更改手机号码后点击状态
                // emailupdates: false,
                // allmobiles: '',
                lister: [
                    {  text: '邮箱验证' },
                    {  text: '原手机验证' },
                ],
                aa: '',    //邮箱验证和手机验证对应的错误信息
                identCode: '',   //id btn变量
                identColor: '',   //id btn color的变量
            }
        },
        validations: {
            textFrom: {
                mobile: {
                    required,
                    telNumPattern
                },
                captcha: {
                    required,
                    minLength: minLength(4)
                },
                email: {
                    required,
                    emailPattern
                },
                emailcaptcha: {
                    required,
                    minLength: minLength(4)
                },
                password: {
                    required,
                    minLength: minLength(6)
                },
                confirmPass: {
                    required,
                    minLength: minLength(6)
                }
            }
        },
        created() {
            let that = this;
            that.userInfo = window.localStorage.getItem('userInfo');
            that.userInfo = JSON.parse(that.userInfo);
        },
        components: {
            setHeader,
            Btn
        },
        methods: {
            // 根据字段验证转换 class 状态
            validClass(data) {
                if (!data) return {};
                return {
                    error: data["$dirty"] && data["$invalid"],
                    success: data["$dirty"] && !data["$invalid"]
                };
            },
            //保存
            // gotobtn() {
            //     this.$emit('savedone');
            // },
            //返回
            gotoback() {
                this.$emit('setdone');
            },
            // 其他方式登录 微信登录
            WeChatLogin() {
                if(this.userName == '') {
                    this.msgboxFlag = true; 
                }else {
                    this.$mobileDialog({
                        dialog_title: '手机验证',
                        dialog_desc: '为了您的账号安全，请手机验证后进行操作！',
                        phonetips: '手机号码',
                        smstips: '输入手机验证码',
                        okText: '立即绑定',
                        callback (flag) {
                            if(flag) {
                                //手机验证成功直接打开微信登录
                                this.weChatLogin2();
                            }    
                        }
                    });
                }
                
            },
            //唤起微信登陆
            weChatLogin2(){
                var rollUrl = window.location.protocol + '//' + window.location.host + '/authorization';
                this.$fetch(this.$path+'/index.php/api/v2/getcode',encodeURIComponent(rollUrl)).then((res) => {
                    if(res) {
                        window.location.href=res;   //判断是否授权
                    }         
                })
            },

            close() {
            this.show = false;
            //   this.$emit('done');
            },
            afterLeave() {
            this.state = false;
            //   this.$emit("update:control", false);
            },
            cancel() {
                this.close();
            },

                // moblieShow: false,            
                // emailShow: false,               
                // passShow: false,               
                // updateShow: false,             
                // state: false,                  
                // show: false,                   
                // emailInput: true,               //更改手机号手机号码和邮箱号码不显示的时候用

            //点击手机号码
            mobileClick() {
               let that = this;
               that.isCheck = 1;
                if(this.userInfo.mobile == '' || this.userInfo.mobile == null || this.userInfo.mobile == '暂无数据') {
                    that.state = true;
                    that.show = true;
                    that.moblieShow = true;    //绑定手机出现
                    that.emailShow = false;
                    that.updateShow = false;
                    that.passShow = false;
                    that.emailInput = false;
                    that.dialog_config.dialog_title = '绑定手机号';
                    that.dialog_config.dialog_desc = '为了更好的服务您，请绑定您的手机号码！';
                    that.dialog_config.okText = '立即绑定';
                    
                    // that.states = 1;
                }else {
                    that.state = true;
                    that.show = true;
                    that.updateShow = true;    //更改手机号码 邮箱验证
                    that.moblieShow = false;
                    that.passShow = false;
                    that.emailShow = false;
                    that.emailInput = false;
                    // that.coder = '';
                    
                    that.dialog_config.dialog_title = '更改手机号';
                    that.dialog_config.dialog_desc = '为了您的安全，请验证相关的安全信息！';
                    that.dialog_config.updateokText = '下一步';

                    that.userInfo.usermail = that.userInfo.usermail ? that.userInfo.usermail : '暂无设置邮箱请先设置';
                    
                    that.$nextTick(_ => {
                        $('.yanz').text("您已选择邮箱验证，尾号" + that.userInfo.usermail);
                        $('#selectid').change(() => {
                            let options = $("#selectid option:selected").val();
                             if(options==0) {
                                 $('.yanz').text("您已选择邮箱验证，尾号" + that.userInfo.usermail);
                                 $('.yanzhens').text("");
                                 that.updateIphone = 1;
                                 
                             }else if(options==1){
                                 $('.yanzhens').text("您已选择手机验证，尾号" + that.userInfo.mobile);
                                 $('.yanz').text("");
                                 that.updateIphone = 2;
                             }
                             
                        })                
                    })
                }     
            },
            //点击邮箱账号
            emailClick() {
                let that = this;
                that.isCheck = 2;
                if(that.userInfo.usermail == null || that.userInfo.usermail == '') {
                    console.log('邮箱为空');
                    that.state = true;
                    that.show = true;
                    that.moblieShow = false;
                    that.emailInput = true;
                    that.passShow = false;
                    that.updateShow = false;
                    that.emailShow = true;     //绑定邮箱出现
                    that.dialog_config.dialog_title = '绑定邮箱';
                    that.dialog_config.dialog_desc = '为了您的账号安全，请绑定您的邮箱号码！';
                    that.dialog_config.emailokText = '立即绑定';
                    that.emailstate = 1;   //点击立即绑定访问绑定接口
                }else {
                    console.log('邮箱不为空');
                    that.state = true;
                    that.show = true;
                    that.moblieShow = true;
                    that.emailInput = true;     //手机验证出现
                    that.passShow = false;
                    that.updateShow = false;
                    that.emailShow = false;
                    that.dialog_config.dialog_title = '手机验证';
                    that.dialog_config.dialog_desc = '为了您的账号安全，请手机验证后进行操作！';
                    that.dialog_config.okText = '立即验证';
                    that.states = 2;
                    that.textFrom.mobile = null;
                    that.textFrom.captcha = null;
                }
            },
            //点击友圈密码
            updateClick() {
                let that = this;
                if(that.userPassword == '' || that.userPassword == '未设置') {   //未设置
                    that.state = true;
                    that.show = true;
                    that.moblieShow = false;
                    that.emailInput = false;
                    that.updateShow = false;
                    that.emailShow = false;
                    that.passShow = true;
                    that.dialog_config.dialog_title = '绑定密码';
                    that.dialog_config.dialog_desc = '为了您的账号安全，请尽快设置登录密码！';
                    that.dialog_config.passplaceholder = '输入密码';
                    that.dialog_config.confirmplaceholder = '再次输入密码';
                    that.dialog_config.passokText = '立即设置';
                    // that.passState = 1;
                }else {  //已设置
                    that.state = true;
                    that.show = true;
                    that.passShow = false;
                    that.moblieShow = true;
                    that.emailInput = true;
                    that.emailShow = false;
                    that.updateShow = false;
                    that.dialog_config.dialog_title = '手机验证';
                    that.dialog_config.dialog_desc = '为了您的账号安全，请手机验证后进行操作！';
                    that.dialog_config.okText = '立即验证';
                    that.states = 1;                   //已设置 点击手机验证跳转到更改密码
                    that.textFrom.mobile = null;
                    that.textFrom.captcha = null;
                    that.coder = null;
                }
            },
            //更改手机号码
            updatemobile(updateIphone) {
                let that = this;
                if(that.updateIphone == 1) {
                    that.state = true;
                    that.show = true;
                    that.moblieShow = false;
                    that.emailInput = false;
                    that.passShow = false;
                    that.updateShow = false;
                    that.emailShow = true;
                    that.dialog_config.dialog_title = '邮箱验证';
                    that.dialog_config.emailokText = '下一步';
                    that.textFrom.email = that.userInfo.usermail;
                    that.updateIphone = 1;
                    that.emailstate = 3;   //去到验证邮箱
                    that.textFrom.emailcaptcha = null;  //再次点进来清除输入框的验证码
                    
                }else if(that.updateIphone == 2) {
                    that.state = true;
                    that.show = true;
                    that.passShow = false;
                    that.updateShow = false;
                    that.emailInput = false;
                    that.emailShow = false;
                    that.moblieShow = true;
                    that.dialog_config.dialog_title = '原手机验证';
                    that.dialog_config.okText = '下一步';
                    that.textFrom.mobile = that.userInfo.mobile;
                    that.updateIphone = 2;
                    that.states = 3;
                    that.textFrom.captcha = null;  //再次点进来清除输入框的验证码
                }
            },

            //立即绑定邮箱提交
            emailconfirm(emailstate) {
                let that = this;
                let access_token = window.localStorage.getItem('access_token');
                let captcha = that.textFrom.emailcaptcha;
                let email = that.textFrom.email;

                if(that.emailstate == 3) {
                    if(captcha == '' || email == '') {
                        that.$openTips({
                            text: '邮箱或验证码不能为空',
                            time: 1000
                        })
                        return;
                    }
                    if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(email)) {
                        that.$openTips({
                            text: '邮箱格式错误',
                            time: 1000
                        })
                        return;
                    }
                    that.$post(that.$path + '/index.php/api/users/verificationEmail',{access_token,captcha,email})
                        .then((res) => {
                            if(res.code == 200) {                               
                                that.state = true;
                                that.show = true;
                                that.passShow = false;
                                that.updateShow = false;
                                that.emailInput = true;
                                that.emailShow = false;
                                that.moblieShow = true;    //更改手机页面出现
                                that.dialog_config.dialog_title = '更改手机号';
                                that.dialog_config.dialog_desc = '您已成功通过验证，请输入新手机进行绑定';
                                that.dialog_config.okText = '立即绑定';

                                that.states = 4;
                                that.textFrom.mobile = null;
                                that.textFrom.captcha = null;
                                console.log('邮箱验证成功加1');
                            }else {
                                that.$openTips({
                                    text: res.msg,
                                    time: 1000
                                })
                            }
                    })
                    that.emailstate = 3;
                    
                    return;
                }



                if(captcha == '' || email == '') {
                    that.$openTips({
                        text: '邮箱或验证码不能为空',
                        time: 1000
                    })
                    return;
                }
                if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(email)) {
                    that.$openTips({
                        text: '邮箱格式错误',
                        time: 1000
                    })
                    return;
                }
                that.$post(that.$path + '/index.php/api/users/setEamil',{access_token,captcha,email})
                    .then((res) => {
                        if(res.code == 200) {
                            if(that.emailstate == 1) {
                                that.state = false;
                                that.show = false;
                                that.moblieShow = false;
                                that.emailInput = false;
                                that.updateShow = false;
                                that.emailShow = false;
                                that.passShow = false;
                                that.emailstate = 1;  //访问绑定接口 绑定邮箱成功 ，关闭页面
                                that.userInfo.usermail = email;  //绑定的邮箱绑定到页面
                                that.$openTips({
                                    text: res.msg,
                                    time: 2000
                                })
                                
                                //绑定邮箱成功 更新并保存本地数据
                                let userInfo = JSON.stringify(that.userInfo);
                                window.localStorage.setItem('userInfo',userInfo);
                                console.log('邮箱为空时，绑定邮箱成功');
                            }else if(that.emailstate == 2) {
                                that.state = false;
                                that.show = false;
                                that.moblieShow = false;
                                that.emailInput = false;
                                that.updateShow = false;
                                that.emailShow = false;
                                that.passShow = false;
                                that.emailstate = 2;    //访问绑定接口，更改邮箱成功
                                that.userInfo.usermail = email;  //更改的邮箱绑定到页面
                                that.$openTips({
                                    text: res.msg,
                                    time: 2000
                                })
                                //更改邮箱成功 更新并保存本地数据
                                let userInfo = JSON.stringify(that.userInfo);
                                window.localStorage.setItem('userInfo',userInfo);
                                console.log('邮箱不为空时，更改邮箱成功');
                            }
                            
                        }else {
                            that.$openTips({
                                text: res.msg,
                                time: 2000
                            })
                        }
                })
            },
            //点击完成 修改新密码
            passconfirm(passState) {
                let that = this;
                let access_token = window.localStorage.getItem('access_token');
                let password = that.textFrom.password;
                let definepassword = that.textFrom.confirmPass;
                that.$post(that.$path + '/index.php/api/users/setpassword',{access_token,password,definepassword})
                    .then((res) => {
                        if(res.code == 200) {
                            if(that.passState == 1) {
                                that.state = false;
                                that.show = false;
                                that.updateShow = false;
                                that.emailInput = false;
                                that.emailShow = false;
                                that.moblieShow = false;
                                that.passShow = false;
                                that.passState = 1;     //点击更改密码成功后 
                                that.userPassword = '已设置';
                                that.$openTips({
                                    text: res.msg,
                                    time: 1000
                                })
                                console.log('修改密码成功');
                                let userInfo = JSON.stringify(that.userInfo);
                                window.localStorage.setItem('userInfo',userInfo);
                                
                            }
                        }else {
                            that.$openTips({
                                text: res.msg,
                                time: 2000
                            })
                        }
                })
            },
            //点击立即验证验证手机
            confirm(states) {
                let that = this;
                let access_token = window.localStorage.getItem('access_token');
                let captcha = that.textFrom.captcha;
                let mobile = that.textFrom.mobile;
                

                //绑定手机号码
                if(that.states == 4) {
                    
                    //绑定手机提交
                    // let access_token = window.localStorage.getItem('access_token');
                    // let mobile = that.textFrom.mobile;
                    // let captcha = that.textFrom.captcha;
                    if(captcha == null || mobile == null) {
                        that.$openTips({
                            text: '手机号码或验证码不能为空',
                            time: 1000
                        })
                        return;
                    }
                    if (!/^1[3456789]\d{9}$/.test(mobile)) {
                        that.$openTips({
                            text: "电话号码格式错误",
                            time:1000
                        });
                        return;
                    }
                    that.$post(that.$path + '/index.php/api/users/setPhome',{access_token,mobile,captcha})
                        .then((res) => {
                            if(res.code == 200) {
                                that.state = false;
                                that.show = false;
                                that.passShow = false;
                                that.updateShow = false;
                                that.emailInput = false;
                                that.emailShow = false;
                                that.moblieShow = false;
                                that.userInfo.mobile = mobile;  //更改/绑定手机成功 

                                that.$openTips({
                                    text: res.msg,
                                    time: 2000
                                })
                                
                                // 更改/绑定手机成功 保存并更新到本地数据
                                let userInfo = JSON.stringify(that.userInfo);
                                window.localStorage.setItem('userInfo',userInfo);

                                console.log('更改手机成功');
                            }else {
                                that.$openTips({
                                    text: res.msg,
                                    time:1000
                                });
                            }

                    })
                    that.states = 4;
                    return;
                }
                

                if(captcha == '' || mobile == '' || captcha == null || mobile == null) {
                    that.$openTips({
                        text: '手机号码或验证码不能为空',
                        time: 1000
                    })
                    return;
                }
                if (!/^1[3456789]\d{9}$/.test(mobile)) {
                    that.$openTips({
                        text: "电话号码格式错误",
                        time:1000
                    });
                    return;
                }


                that.$post(that.$path + '/api.php/api/users/verificationSMS',{access_token,captcha,mobile})
                    .then((res) => {
                        if(res.code == 200) {
                            if(that.states == 1) {   //密码不为空时候，修改密码 手机验证后跳转到更改密码
                                that.state = true;
                                that.show = true;
                                that.updateShow = false;
                                that.emailInput = false;
                                that.emailShow = false;
                                that.moblieShow = false;
                                that.passShow = true;     //密码出现
                                that.dialog_config.dialog_title = '请确认新密码';
                                that.dialog_config.dialog_desc = '为了您的安全，密码请结合数字、英文！';
                                that.dialog_config.passplaceholder = '请输入更改密码';
                                that.dialog_config.confirmplaceholder = '请再次输入更改密码';
                                that.dialog_config.passokText = '完成';     //点击完成 修改密码成功
                                that.states = 1;
                                that.passState = 1;

                                //修改密码成功 更新并保存本地数据
                                let userInfo = JSON.stringify(that.userInfo);
                                window.localStorage.setItem('userInfo',userInfo);
                                console.log('手机验证成功跳转更改密码');
                            }else if(that.states == 2) {  //邮箱不为空的时候，手机验证
                                that.state = true;
                                that.show = true;
                                that.updateShow = false;
                                that.emailInput = true;
                                that.emailShow = true;     //邮箱出现
                                that.moblieShow = false;
                                that.passShow = false;
                                that.dialog_config.dialog_title = '更改邮箱';
                                that.dialog_config.dialog_desc = '您已成功通过验证，请输入新邮箱进行绑定';
                                that.dialog_config.emailokText = '立即绑定';
                                that.states = 2;            
                                that.emailstate = 2;       //验证成功后跳转更改邮箱页面
                                console.log('邮箱不为空时，手机验证成功跳转更改邮箱');
                            }else if(that.states == 3) {
                                that.states = 3;
                                that.state = true;
                                that.show = true;
                                that.passShow = false;
                                that.updateShow = false;
                                that.emailInput = true;
                                that.emailShow = false;
                                that.moblieShow = true;    //更改手机页面出现
                                that.dialog_config.dialog_title = '更改手机号';
                                that.dialog_config.dialog_desc = '您已成功通过验证，请输入新手机进行绑定';
                                that.dialog_config.okText = '立即绑定';
                                
                                that.states = 4;
                                that.textFrom.mobile = null;
                                that.textFrom.captcha = null;
                                console.log('原手机验证成功')
                            }
                        }else {
                            that.$openTips({
                                text: res.msg,
                                time: 2000
                            })
                        }
                })
            },


            //手机验证码
            sendSms() {
                let that = this;
                if (that.textFrom.mobile == "") {
                    that.$openTips({
                        text: "手机号码不能为空！",
                        time: 1000
                    });
                    return;
                }
                if (!/^1[3456789]\d{9}$/.test(that.textFrom.mobile)) {
                    that.$openTips({
                        text: "电话号码格式错误",
                        time:1000
                    });
                    return;
                }

                that.$fetch(that.$path+'/index.php/api/v2/SMS/'+ that.textFrom.mobile+'/mobile').then((res) => {
                    if(res.code == 200) {
                        that.$nextTick(() => {
                            that.contpending = true;
                            if (that.pending) return;
                            that.pending = true;
                            let timer = null,
                                count = 60;
                            clearInterval(timer);
                            timer = setInterval(_ => {
                                if (count <= 0) {
                                    that.contpending = false;
                                    that.pending = false;
                                    clearInterval(timer);
                                    that.count = count = 60;
                                    that.identCode = document.getElementById('btn').style.borderColor;
                                    that.identCode="#e50838";
                                    that.identColor = document.getElementById('btn').style.color;
                                    that.identColor="#fff";
                                } else {
                                    --count;
                                    that.identCode="#999";
                                    that.identColor="#999";
                                    that.count = count;
                                }
                            }, 1000);
                        })

                    }               
                })
            },

            //邮箱验证码
            sendEmailSms() {
                let that = this;
                if(that.isCheck == 2) {
                    if (that.textFrom.email == "") {
                        that.$openTips({
                            text: "邮箱不能为空！",
                            time: 1000
                        });
                        return;
                    }
                    if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(that.textFrom.email)) {
                        that.$openTips({
                            text: "邮箱格式错误",
                            time:1000
                        });
                        return;
                    }
                    that.isCheck = 2;
                    that.$fetch(that.$path+'/index.php/api/v2/SMS/'+ that.textFrom.email+'/setemail').then((res) => {
                        if(res.code == 200) {
                            that.$nextTick(() => {
                                that.emailpending = true;
                                if (that.pending) return;
                                that.pending = true;
                                let timer = null,
                                    emailcount = 60;
                                clearInterval(timer);
                                timer = setInterval(_ => {
                                    if (emailcount <= 0) {
                                        that.emailpending = false;
                                        that.pending = false;
                                        clearInterval(timer);
                                        that.emailcount = emailcount = 60;
                                        that.identCode = document.getElementById('btn').style.borderColor;
                                        that.identCode="#e50838";
                                        that.identColor = document.getElementById('btn').style.color;
                                        that.identColor="#e50838";
                                    } else {
                                        --emailcount;
                                        that.identCode="#d8d8d8";
                                        that.identColor="#999";
                                        that.emailcount = emailcount;
                                    }
                                }, 1000);
                            })     
                        }else {
                            that.$openTips({
                                text: res.msg,
                                time: 2000
                            });
                        }               
                    })

                }else{
                    if (that.userInfo.usermail == "") {
                        that.$openTips({
                            text: "邮箱不能为空！",
                            time: 1000
                        });
                        return;
                    }
                    that.$fetch(that.$path+'/index.php/api/v2/SMS/'+ that.userInfo.usermail+'/emailverification').then((res) => {
                        if(res.code == 200) {
                            that.$nextTick(() => {
                                that.emailpending = true;
                                if (that.pending) return;
                                that.pending = true;
                                let timer = null,
                                    emailcount = 60;
                                clearInterval(timer);
                                timer = setInterval(_ => {
                                    if (emailcount <= 0) {
                                        that.emailpending = false;
                                        that.pending = false;
                                        clearInterval(timer);
                                        that.emailcount = emailcount = 60;
                                        that.identCode = document.getElementById('btn').style.borderColor;
                                        that.identCode="#e50838";
                                        that.identColor = document.getElementById('btn').style.color;
                                        that.identColor="#e50838";
                                    } else {
                                        --emailcount;
                                        that.identCode="#d8d8d8";
                                        that.identColor="#999";
                                        that.emailcount = emailcount;
                                    }
                                }, 1000);
                            })     
                        }else {
                            that.$openTips({
                                text: res.msg,
                                time: 2000
                            });
                        }               
                    })
                    
                }

            },

            onBindTel() {
                let that = this;
                if (that.$v.textFrom.$invalid || that.pending) return;
                that.pending = true;

                that.$v.textFrom.mobile.$touch();
                that.$v.textFrom.captcha.$touch();
                that.$v.textFrom.email.$touch();
                that.$v.textFrom.emailcaptcha.$touch();
                that.$v.textFrom.password.$touch();
                that.$v.textFrom.confirmPass.$touch();

        
            },
        },
        props: ['setdone', 'savedone']
    }
</script>

<style>
.main_security span {
    width: 76%;
    text-align: right;
}
.yanzhen {
    font-size: 0.24rem;
    color: #e50838;
}
.yanzhens {
    width: 2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
.yanzhens, .yanz {
    text-align: center;
    color: #666;
}
#selectid {
    width: 4.5rem;
    height: 0.56rem;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    border: 1px solid rgba(204, 204, 204, 1);
    border-radius: 4px;
    box-shadow: none;
    margin: 0 auto;
    display: block;
    outline: none;
}

</style>

<style lang="scss" scoped>
.dialog {
  width: 6rem;
  padding-bottom: 0.2rem;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  &__wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
  }
  &__background {
    height: inherit;
    width: inherit;
    background-color: rgba(0, 0, 0, 0.5);
  }
  &__head {
    width: 5.8rem;
    line-height: 1;
    text-align: center;
    position: relative;
    margin: 0.3rem auto 0.3rem;
    font-size: 0.28rem;
    color: #333;
    p {
      font-size: 0.22rem;
      color: #999;
      line-height: 0.48rem;
    }
    &__btn {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 0.16rem;
      color: #333;
      width: 0.48rem;
      height: 0.48rem;
      border-radius: 50%;
      line-height: 0.48rem;
    }
  }
  &__body {
    padding: 0 0.2rem;
    font-size: 0.22rem;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    color: #999;
    white-space: normal;
    word-break: break-all;
    text-align: center;
    line-height: 0.36rem;
    text-align: left;
    input {
      border: 1px solid #ccc;
      // height: 0.6rem;
      line-height: 0.6rem;
      box-sizing: border-box;
      border-radius: 4px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;    
      width: 100%;
      font-size: 0.24rem;
      color: #333;
      margin-bottom: 0.2rem;
      padding: 0 0.2rem;
    }
    #btn {
      border: 1px solid #e50838;
      font-size: 0.22rem;
      color: #e50838;
      border-radius: 4px;
      width: 42%;
      height: 0.6rem;
      line-height: 0.58rem;
      display: inline-block;
      vertical-align: top;
      padding: 0 0.12rem;
      text-align: center;
    }
  }
  &__footer {
    font-size: 0;
    text-align: center;
    margin-top: 0.2rem;
    &__btn {
      font-size: 0.28rem;
      line-height: 1;
      margin-bottom: 0.2rem;

      &:active {
        background-color: #f1f1f1;
        opacity: 1;
      }

      &--success {
        width: 4.6rem;
        height: 0.8rem;
        font-size: 0.28rem;
        color: #fff;
        background-color: #e50838;
        border-radius: 4px;
        vertical-align: super;

        &:active {
          background-color: #e50838;
          opacity: 1;
          color: #fff;
        }
      }
      &--fail {
        background-color: #fff;
        color: #e50838;
        width: 4.6rem;
        height: 0.8rem;
        border-radius: 4px;
        border: 1px solid #e50838 !important;
        &:active {
          background-color: #fff;
          opacity: 1;
          color: #e50838;
        }
      }
    }
  }
}
.background-fade {
  &-enter {
    opacity: 0;
  }
  &-enter-active {
    transition: opacity 0.2s;
  }
  &-enter-top {
    opacity: 1;
  }
  &-leave {
    opacity: 1;
  }
  &-leave-active {
    transition: opacity 0.2s;
    opacity: 0;
  }
}
.fade-move {
  &-enter {
    opacity: 0.6;
    top: 45%;
  }
  &-enter-active {
    transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  &-enter-to {
    opacity: 1;
    top: 50%;
  }
  &-leave {
  }
  &-leave-active {
  }
  &-leave-to {
  }
}
</style>